<template>
  <qc-page-header></qc-page-header>
  <a-row :gutter="16">
    <a-col :xl="4" :xs="24">
      <div class="org-unit-tree-wrapper">
        <a-card :bordered="false">
          <org-dept-tree :show-action-icon="true" @dept-tree-select-change="deptTreeSelectChange"></org-dept-tree>
        </a-card>
      </div>
    </a-col>
    <a-col :xl="20" :xs="24">
      <org-user-query :query-param="queryParam" @search="search"></org-user-query>
      <div class="org-query-list-table">
        <org-user-list ref="userListRef" :query-param="queryParam"></org-user-list>
      </div>
    </a-col>
  </a-row>
</template>
<script lang='ts'>
import { defineComponent, reactive, ref } from 'vue'
import { useRoute } from 'vue-router'
import OrgUserList from './component/user-list.vue'
import OrgUserQuery from './component/user-query.vue'
import OrgDeptTree from '../dept/component/dept-tree.vue'
export default defineComponent({
  name: 'OrgUserIndex',
  components: {
    OrgUserList,
    OrgUserQuery,
    OrgDeptTree,
  },
  setup() {
    const route = useRoute()
    const userListRef = ref(null)
    const userState = reactive({
      title: route.meta.title,
      subTitle: route.meta.subTitle,
      queryParam: { deptId: null },
      search: () => userListRef.value.searchTable(),
      deptTreeSelectChange: (deptId: string) => {
        userState.queryParam.deptId = deptId
        userState.search()
      },
    })
    return {
      userListRef,
      ...userState,
    }
  },
})
</script>
<style lang='less' scoped>
.org-unit-tree-wrapper ::v-deep(.ant-card-body) {
  padding-top: 16px;
}
.org-query-list-table {
  margin-top: 16px;
}
</style>